<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input{
            outline: 0px;
        }

        /* 属性选择器 */
        input[type='file']{
            display: none;
        }
        img{
            width:100px;
        }
    </style>
    <script>
        window.onload = function () {
            var btn = document.getElementById("btn");
            // btn.onclick = function () {//鼠标点击事件
            // btn.ondblclick = function () {//双击事件
            // btn.onmouseover=function(){//鼠标悬浮事件
            // btn.onmouseout=function(){//鼠标离开事件
            // btn.onmousedown=function(){//鼠标按钮被按下的时候
            // btn.onmouseup = function () {//鼠标按纽被松开的时候
            // btn.onmousemove = function () {//鼠标被移动的时候
            btn.oncontextmenu = function () {//鼠标右击
                console.log("鼠标事件");
            };

            //键盘事件
            var username = document.getElementById("username");

            //执行顺序:先keydown-->keypress-->keyup
            username.onkeydown = function (e) {
                console.log(e.keyCode);
                if(e.keyCode==13){
                    console.log("您按下了回车键");
                }
                console.log("按键被按下");
            };
            username.onkeypress = function () {
                console.log("按键被按压");
            };
            username.onkeyup = function () {
                console.log("按键被松开");
            };

            //表单事件
            username.onfocus=function(){//获得焦点事件
                username.style.border="3px solid red";
            };
            username.onblur=function(){//失去焦点事件
                username.style.border="2px dashed green";
            };

            var hobby=document.getElementById("hobby");
            hobby.onchange=function(){
                console.log(hobby.checked);
            };

            var boy=document.getElementById("boy");
            boy.onchange=function(){//选项内容发生改变的时候触发的事件
                console.log("触发了事件");
            };

            var header=document.getElementById("header");
            var logo=document.getElementById("logo");
            header.onchange=function(){
                // 文件选择器的DOM对象.files  当前选择的文件信息的集合
                console.log(this.files[0]);//当前选择的文件对象
                // window.URL.createObjectURL(文件对象)  根据文件对象创建一个图像地址
                var url=window.URL.createObjectURL(this.files[0]);
                logo.src=url;

            };

            var email=document.getElementById("email");
            email.onselect=function(){//文本内容被选中的时候触发的事件
                console.log(1);
            };

            var form=document.getElementById("form");//DOM对象
            form.onsubmit=function(){
                var val=email.value;//获取email文本框的value值
                if(val==""){
                    return false;//阻止表单提交
                }
                return true;//允许提交
            };  
        };
      
    </script>
</head>

<body>
    <input type="button" value="我是按钮" id="btn">
    <br>
    <input type="text" id="username">
    <br>
    爱好:
    <input type="checkbox" value="油人" id="hobby"><label for="hobby">老油条</label>
    <br>
    选择你喜欢的男生:
    <select  id="boy">
        <option value="wangziwei">王梓伟</option>
        <option value="xuweifeng">许伟峰</option>
        <option value="zhanghe">张赫</option>
        <option value="chenxinyu">陈鑫宇</option>
        <option value="tangyi">sugar</option>
    </select>
    <br>
    头像:<input type="file" id="header" >
    <label for="header">
        <img src="images/rabbit.png" alt="" id="logo">
    </label>

    <br>

    <!-- 可以给form标签绑定submit事件，onsubmit="return true"表示允许提交  onsubmit="return false"阻止提交 -->
    <!-- <form action="success.html" onsubmit="return true"> -->
    <form action="success.html" id="form">
        <input type="text" id="email" name="email">
        <br>
        <input type="submit" value="提交">
    </form>

</body>

</html>